<template>
  <div class="consultation">
    <div class="echarts-block">
      <div id="pie"></div>
      <div id="bar"></div>
    </div>
  </div>
</template>

<script>
import moment from "moment";
import { getRecord, getBlood } from "../service.js";
import * as echarts from "echarts";
export default {
  name: "home",
  mounted() {
    getRecord({
      page: 1,
      pageSize: 1000,
    }).then((res) => {
      console.log(res.data.data);
      this.recordListUse = res.data.data.filter(v => v.distribute === 'true');
      this.recordListNeed = res.data.data.filter(v => v.distribute === 'false');
      getBlood({
        page: 1,
        pageSize: 1000,
      }).then((res) => {
        this.bloodList = res.data.data;
        this.drawChart();
      });
    });
  },
  data() {
    return {
      bloodList: [],
      recordListUse: [],
      recordListNeed: [],
    };
  },
  methods: {
    drawChart() {
      let aSList = this.bloodList.filter((v) => v.group === "A");
      let bSList = this.bloodList.filter((v) => v.group === "B");
      let abSList = this.bloodList.filter((v) => v.group === "AB");
      let oSList = this.bloodList.filter((v) => v.group === "O");
      
      let aS = aSList.reduce((a, b) => {
        return a + Number(b.volume.split("m")[0]);
      }, 0);
      let bS = bSList.reduce((a, b) => {
        return a + Number(b.volume.split("m")[0]);
      }, 0);
      let abS = abSList.reduce((a, b) => {
        return a + Number(b.volume.split("m")[0]);
      }, 0);
      let oS = oSList.reduce((a, b) => {
        return a + Number(b.volume.split("m")[0]);
      }, 0);
      let pie = echarts.init(document.getElementById("pie"));
      // 绘制图表
      pie.setOption({
        title: {
          text: "献血量分类统计",
          left: "center",
          top: 0,
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "12%",
          left: "center",
        },
        series: [
          {
            name: "分类统计",
            type: "pie",
            radius: ["30%", "50%"],
            avoidLabelOverlap: false,
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 40,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              {
                value: aS,
                name: "A型血",
              },
              {
                value: bS,
                name: "B型血",
              },
              {
                value: abS,
                name: "AB型血",
              },
              {
                value: oS,
                name: "O型血",
              },
            ],
          },
        ],
      });

      let bar = echarts.init(document.getElementById("bar"));
      let aNeedList = this.recordListNeed.filter((v) => v.group === "A");
      let bNeedList = this.recordListNeed.filter((v) => v.group === "B");
      let abNeedList = this.recordListNeed.filter((v) => v.group === "AB");
      let oNeedList = this.recordListNeed.filter((v) => v.group === "O");
      let aNeed = aNeedList.reduce((a, b) => {
        return a + Number(b.volume.split("m")[0]);
      }, 0);
      let bNeed = bNeedList.reduce((a, b) => {
        return a + Number(b.volume.split("m")[0]);
      }, 0);
      let abNeed = abNeedList.reduce((a, b) => {
        return a + Number(b.volume.split("m")[0]);
      }, 0);
      let oNeed = oNeedList.reduce((a, b) => {
        return a + Number(b.volume.split("m")[0]);
      }, 0);
      
      let aUseList = this.recordListUse.filter((v) => v.group === "A");
      let bUseList = this.recordListUse.filter((v) => v.group === "B");
      let abUseList = this.recordListUse.filter((v) => v.group === "AB");
      let oUseList = this.recordListUse.filter((v) => v.group === "O");
      let aUse = aUseList.reduce((a, b) => {
        return a + Number(b.volume.split("m")[0]);
      }, 0);
      let bUse = bUseList.reduce((a, b) => {
        return a + Number(b.volume.split("m")[0]);
      }, 0);
      let abUse = abUseList.reduce((a, b) => {
        return a + Number(b.volume.split("m")[0]);
      }, 0);
      let oUse = oUseList.reduce((a, b) => {
        return a + Number(b.volume.split("m")[0]);
      }, 0);
      console.log(aUse, bUse)
      bar.setOption({
        title: {
          text: "库存供求关系",
          top: 0,
          left: "center",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        legend: {
          data: ["库存", "需求"],
          top: 30
        },
        xAxis: [
          {
            type: "category",
            axisTick: { show: false },
            data: ["A型", "B型", "AB型", "O型"],
          },
        ],
        yAxis: [
          {
            type: "value",
          },
        ],
        series: [
          {
            name: "库存",
            type: "bar",
            barGap: 0,
            emphasis: {
              focus: "series",
            },
            data: [aS - aUse, bS - bUse, abS -abUse, oS -oUse],
          },
          {
            name: "需求",
            type: "bar",
            emphasis: {
              focus: "series",
            },
            data: [aNeed, bNeed, abNeed, oNeed],
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
h2 {
  text-align: center;
  margin-top: 20px;
  margin-bottom: 20px;
}
.echarts-block {
  margin-top: 20px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;

  #pie,
  #bar {
    width: 100%;
    height: 40vh;
  }
}
</style>
